/*
 * @Author: Mark
 * @Date: 2019-03-31 20:58:10
 * @LastEditors: Mark
 * @LastEditTime: 2019-03-31 20:58:10
 * @Description: 备忘录页面
 */
<template>
  <div>

    <!-- 1.顶部搜索组件 -->
    <el-row style=" text-align: left">
      <el-date-picker
        v-model="page.searchTime"
        type="date"
        value-format="timestamp"
        placeholder="选择日期"
      >
      </el-date-picker>

      <el-select
        style="width:100px"
        v-model="page.status"
        placeholder="状态"
      >
        <el-option
          v-for="item in page.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-button
        type="primary"
        icon="el-icon-search"
        @click="search"
      >搜索</el-button>

      <el-button
        style="float:right"
        type="primary"
        icon="el-icon-plus"
        @click="clickAddBtn"
      >添加</el-button>

    </el-row>

    <!-- 2.备忘录内容 -->
    <el-row style="margin-top:20px">
      <el-card
        class="box-card"
        shadow="hover"
        :body-style="memo.style"
        v-for="(memo,index) in response.momeList"
        :key="index"
        @dblclick.native="showMemoInfo(memo)"
      >
        <i
          class="fa fa-map-pin icon-pin"
          aria-hidden="true"
        ></i>
        <div class="tags-btn">
          <el-button
            v-if="memo.status != '完成'"
            type="success"
            icon="el-icon-check"
            circle
            @click="clickfinishBtn(memo)"
          ></el-button>

          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="clickEditBtn(memo)"
          ></el-button>

          <el-button
            class="close-btn"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </div>

        <div class="tags-item">
          <i class="fa fa-tags"> </i>{{memo.name}}
        </div>

        <div class="tags-time">
          <span><i
              class="fa fa-calendar-check-o"
              aria-hidden="true"
            ></i> {{memo.createTime}}</span>
        </div>

      </el-card>
    </el-row>

    <!--3. 新增或者弹出框 -->
    <el-dialog
      width="30%"
      :title="page.title"
      :close-on-click-modal="false"
      :visible.sync="page.dialogFormVisible"
    >
      <el-form
        :model="request.form"
        :rules="page.memoRules"
        ref="memoForm"
      >
        <el-form-item
          label="标题"
          label-width="100px"
          prop="name"
        >
          <el-input
            v-model="request.form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="描述"
          label-width="100px"
        >
          <el-input
            type="textarea"
            v-model="request.form.des"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="时间"
          label-width="100px"
          prop="expectTime"
        >
          <el-date-picker
            v-model="request.form.expectTime"
            type="date"
            style="float:left"
            value-format="timestamp"
            placeholder="我想呀~在这一天完成"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="权重"
          label-width="100px"
        >
          <el-input-number
            style="float:left;width:220px"
            v-model="request.form.priority"
            :min="0"
          ></el-input-number>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="page.dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submit('memoForm')"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看详情的弹出窗 -->
    <el-dialog
      :title="page.dialogVisibleData.name"
      :visible.sync="page.dialogVisibleInfo"
      width="30%"
      style="text-align: left;"
    >
      <p>备注：{{page.dialogVisibleData.description}}</p>
      <p>状态：{{page.dialogVisibleData.status}}</p>
      <p>创建时间：{{page.dialogVisibleData.createTime}}</p>
      <p>期望完成：{{page.dialogVisibleData.expectTime}}</p>
      <p>实际完成：{{page.dialogVisibleData.finishTime}}</p>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="page.dialogVisibleInfo = false"
        >退出</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Tips from "@/utils/tipsUtil";
const _tips = new Tips();
import Memo from "@/service/stars/MemoService";
const _memo = new Memo();
export default {
  data() {
    return {
      //页面组件中用到的属性
      page: {
        //页面大小（注：当前实现只是实现查询第一页数据）
        pageSize: 50,
        //当前页数
        pageNum: 1,
        //搜索类型下拉框属性值绑定：默认选中待办事件
        status: 1,
        //搜索下来框属性
        options: [
          {
            value: 0,
            label: "全部"
          },
          {
            value: 1,
            label: "待办"
          },
          {
            value: 2,
            label: "处理中"
          },
          {
            value: 3,
            label: "结束"
          }
        ],
        // 默认选中今天
        searchTime: new Date().getTime(),
        //查看备忘录详情弹出窗
        dialogVisibleInfo: false,
        //弹出窗的信息
        dialogVisibleData: new Object(),
        // 新增或者编辑弹出框
        dialogFormVisible: false,
        //弹出框标题
        title: "新增备忘录",
        //弹出框是够为新增操作，false为编辑，true为新增
        isAdd: true,
        //新增或者编辑备忘录的表单
        memoRules: {
          name: [{ required: true, message: "请输入标题", trigger: "blur" }],
          expectTime: [
            {
              type: "date",
              required: true,
              message: "请选择日期",
              trigger: "change"
            }
          ]
        }
      },

      //发送请求时相关的对象
      request: {
        form: {
          //主键id，编辑时用到
          id: "",
          //备忘录标题名称
          name: "",
          //描述
          des: "",
          //状态
          status: 0,
          //期待完成时间
          expectTime: "",
          //排序权重
          priority: 0
        }
      },

      //缓存请求后台返回数据
      response: {
        momeList: []
      }
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {

    /**
     * 发送请求初始化页面
     */
    init() {
      const vue = this;
      const requestParam = {
        pageNum: vue.page.pageNum,
        pageSize: vue.page.pageSize,
        searchTime: vue.page.searchTime,
        status: vue.page.status
      };
      _memo.searchMemo(requestParam).then(
        res => {
          vue.response.momeList = res.data.list;
          vue.parsemomeWidthAndColor(vue.response.momeList);
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    /**
     * 点击搜索“按钮”按钮触发的响应方法
     */
    search() {
      this.init();
    },

    /**
     *点击“添加”按钮的响应方法
     */
    clickAddBtn() {
      const vue = this;
      vue.page.dialogFormVisible = true;
      vue.page.title = "新增备忘录";
      vue.page.isAdd = true;
    },

    /**
     * 新增或者编辑时弹出的“确定”按钮的响应方法
     */
    submit(formName) {
      const vue = this;
      vue.$refs[formName].validate(valid => {
        if (valid) {
          let requestParam = {
            //种类和类型暂不开发，赋值为默认0
            fkCategoryId: 1,
            priority: vue.request.form.priority,
            name: vue.request.form.name,
            description: vue.request.form.des,
            expectTime: vue.request.form.expectTime
          };

          if (vue.page.isAdd) {
            //新增操作
            _memo.add(requestParam).then(
              res => {
                _tips.notifyTips(vue, res.msg);
              },
              err => {
                _tips.notifyTips(vue, err.msg);
              }
            );
          } else {
            //编辑操作
            requestParam.id = vue.request.form.id;
            _memo.editMemo(requestParam).then(
              res => {
                _tips.notifyTips(vue, res.msg);
                vue.page.dialogFormVisible = false;
                vue.init();
              },
              err => {
                _tips.notifyTips(vue, err.msg);
                vue.page.dialogFormVisible = false;
              }
            );
          }
        }
      });
    },

    /**
     * 双击卡片的响应事件：打开详情弹窗
     */
    showMemoInfo(memo) {
      const vue = this;
      vue.page.dialogVisibleInfo = true;
      vue.page.dialogVisibleData = memo;
    },

    /**
     * 解析响应的备忘录信息，根据备忘录名称的长度
     * 动态给卡片添加上背景色和宽度样式
     */
    parsemomeWidthAndColor(datas) {
      for (let memo of datas) {
        const nameLen = memo.name.length;
        if (nameLen <= 3) {
          memo.style = {
            width: "200px",
            background: "#FFCCFF"
          };
        } else if (nameLen <= 5) {
          memo.style = {
            width: "250px",
            background: "#FFFFCC"
          };
        } else if (nameLen <= 10) {
          memo.style = {
            width: "350px",
            background: "#CCFFFF"
          };
        } else {
          memo.style = {
            width: "400px",
            background: "#CCFFFF"
          };
        }
      }
    },

    /**
     * 点击卡片中的“编辑”按钮的响应事件
     */
    clickEditBtn(memo) {
      //显示弹出窗口，更改弹窗的标题
      const vue = this;
      vue.page.dialogFormVisible = true;
      vue.page.title = "编辑备忘录";
      vue.page.isAdd = false;

      //弹窗的信息回填
      vue.request.form.id = memo.id;
      vue.request.form.name = memo.name;
      vue.request.form.des = memo.description;
      vue.request.form.expectTime = memo.expectTimeLong;
      vue.request.priority = memo.prority;
      vue.request.status = memo.status;
    },

    /**
     * 点击卡片中的“完成”按钮的响应事件
     */
    clickfinishBtn(memo) {
      const vue = this;
      _memo
        .finish({
          id: memo.id
        })
        .then(
          res => {
            _tips.notifyTips(vue, res.msg);
            vue.init();
          },
          err => {
            _tips.notifyTips(vue, err.msg);
          }
        );
    }
  }
};
</script>

<style scoped lang="scss">
.box-card {
  //：#FFFFCC;#CCFFCC;#CCCCFF;#CCFFFF;#FFCCFF;
  float: left;
  margin: 5px;
  .el-card__body {
    margin: 0px;
    padding: 10px;
  }

  .icon-pin {
    font-size: 20px;
    text-align: center;
  }

  .tags-btn {
    text-align: right;
    .el-button.is-circle {
      padding: 4px;
    }
  }

  .tags-item {
    font-size: 14px;
    text-align: left;
  }
  .tags-time {
    text-align: left;
    margin-top: 10px;
    color: grey;
  }
}
</style>
